<template>
  <el-dialog
    v-model="visible"
    :title="dialogTitle"
    :width="dialogWidth"
    class="chat-dialog"
    :before-close="handleClose"
  >
    <div class="chat-container">
      <!-- 联系人列表，仅在完整模式下显示 -->
      <div v-if="showContactsList" class="contacts-sidebar">
        <div class="search-box">
          <el-input
            v-model="searchText"
            placeholder="搜索联系人"
            prefix-icon="Search"
            clearable
          />
        </div>
        <div class="contacts-list">
          <div 
            v-for="item in filteredContacts" 
            :key="item.id"
            class="contact-item"
            :class="{ active: currentContact?.id === item.id }"
            @click="selectContact(item)"
          >
            <div class="contact-info">
              <div class="avatar-wrapper">
                <el-avatar :size="40" :src="item.avatar">
                  {{ item.name.charAt(0) }}
                </el-avatar>
                <div v-if="item.unreadCount" class="unread-badge">
                  {{ item.unreadCount > 99 ? '99+' : item.unreadCount }}
                </div>
              </div>
              <div class="contact-info-content">
                <div class="contact-name">{{ item.name }}</div>
                <div class="contact-status">
                  <span class="last-message">{{ item.lastMessage || item.role }}</span>
                  <span class="message-time">{{ item.lastMessageTime }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧聊天区域 -->
      <div class="chat-main">
        <template v-if="currentContact || !showContactsList">
          <div class="chat-header">
            <span class="chat-title">{{ currentContact.name }}</span>
            <span class="chat-subtitle">{{ currentContact.role }}</span>
          </div>
          
          <div class="chat-messages" ref="messagesRef">
            <div v-for="msg in currentMessages" :key="msg.id" class="message" :class="msg.type">
              <el-avatar :size="32" :src="msg.avatar">{{ msg.name?.charAt(0) }}</el-avatar>
              <div class="message-content">
                <div class="message-info">
                  <span class="name">{{ msg.name }}</span>
                  <span class="time">{{ msg.time }}</span>
                </div>
                <div class="message-text" :class="msg.contentType">
                  <template v-if="!msg.contentType || msg.contentType === 'text'">
                    <span v-html="formatMessage(msg.content)"></span>
                  </template>
                  <template v-else-if="msg.contentType === 'image'">
                    <el-image 
                      :src="msg.content" 
                      :preview-src-list="[msg.content]"
                      fit="cover"
                      class="message-image"
                    />
                  </template>
                  <template v-else-if="msg.contentType === 'file'">
                    <div class="file-message">
                      <el-icon><component :is="resolveIcon(item.icon)" /></el-icon>
                      <div class="file-info">
                        <div class="file-name">{{ msg.fileName }}</div>
                        <div class="file-size">{{ msg.fileSize }}</div>
                      </div>
                      <el-button type="primary" link size="small">下载</el-button>
                    </div>
                  </template>
                  <template v-else-if="msg.contentType === 'voice'">
                    <div class="voice-message" @click="playVoice(msg)">
                      <el-icon><Microphone /></el-icon>
                      <span>{{ msg.duration }}″</span>
                      <div class="voice-waves">
                        <span v-for="n in 4" :key="n"></span>
                      </div>
                    </div>
                  </template>
                </div>
              </div>
            </div>
          </div>
          
          <div class="chat-input">
            <div class="input-toolbar">
              <div class="toolbar-left">
                <div class="emoji-trigger">
                  <el-tooltip content="表情" placement="top">
                    <el-button type="primary" link @click="toggleEmoji">
                      <el-icon><ChatRound /></el-icon>
                    </el-button>
                  </el-tooltip>
                  <div v-if="showEmoji" class="emoji-picker">
                    <div class="emoji-tabs">
                      <div 
                        v-for="(group, index) in emojiGroups" 
                        :key="index"
                        class="emoji-tab"
                        :class="{ active: currentEmojiTab === index }"
                        @click="currentEmojiTab = index"
                      >
                        {{ group.icon }}
                      </div>
                    </div>
                    <div class="emoji-content">
                      <div 
                        v-for="emoji in emojiGroups[currentEmojiTab].emojis" 
                        :key="emoji"
                        class="emoji-item"
                        @click="insertEmoji(emoji)"
                      >
                        {{ emoji }}
                      </div>
                    </div>
                  </div>
                </div>
                <el-tooltip content="图片" placement="top">
                  <el-upload
                    action="#"
                    :auto-upload="false"
                    :show-file-list="false"
                    accept="image/*"
                    @change="handleImageUpload"
                  >
                    <el-button type="primary" link>
                      <el-icon><Picture /></el-icon>
                    </el-button>
                  </el-upload>
                </el-tooltip>
                <el-tooltip content="文件" placement="top">
                  <el-upload
                    action="#"
                    :auto-upload="false"
                    :show-file-list="false"
                    @change="handleFileUpload"
                  >
                    <el-button type="primary" link>
                      <el-icon><Folder /></el-icon>
                    </el-button>
                  </el-upload>
                </el-tooltip>
                <el-tooltip content="按住说话" placement="top">
                  <el-button 
                    type="primary" 
                    link 
                    @mousedown="startRecording"
                    @mouseup="stopRecording"
                    @mouseleave="cancelRecording"
                  >
                    <el-icon><Microphone /></el-icon>
                  </el-button>
                </el-tooltip>
              </div>
            </div>
            
            <el-input
              v-model="inputMessage"
              type="textarea"
              :rows="3"
              placeholder="请输入消息"
              @keyup.enter.native="handleSend"
            />
            
            <div v-if="isRecording" class="recording-tip">
              <el-icon class="recording-icon"><Microphone /></el-icon>
              <span>正在录音...</span>
              <span class="recording-time">{{ recordingTime }}s</span>
              <span class="cancel-tip">松开取消</span>
            </div>
            
            <div class="input-actions">
              <el-button type="primary" @click="handleSend" :disabled="!canSend">
                发送
              </el-button>
            </div>
          </div>
        </template>
        
        <div v-else class="no-chat">
          <el-empty description="请选联系人开始聊天" />
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import { ref, watch, nextTick, computed, onMounted, onUnmounted } from 'vue'
import { useUserStore } from '@/store/modules/user'
import { 
  Document, 
  Microphone, 
  Picture, 
  Folder,
  ChatRound,
  ChatDotRound,
  Location,
  Search,
  Close,
  Edit,
  Delete,
  Switch,
  User
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const props = defineProps({
  modelValue: Boolean,
  contact: Object,
  mode: {
    type: String,
    default: 'quick',  // 'quick' 或 'full'
    validator: (value) => ['quick', 'full'].includes(value)
  }
})

const emit = defineEmits(['update:modelValue'])

const visible = ref(props.modelValue)
const inputMessage = ref('')
const messagesRef = ref(null)
const userStore = useUserStore()

// 模拟消息数据
const messages = ref([
  {
    id: 1,
    type: 'received',
    content: '你好，有什么可以帮你的吗？',
    name: props.contact?.name,
    avatar: props.contact?.avatar,
    time: '10:00'
  },
  {
    id: 2,
    type: 'sent',
    content: '你好，我想咨询一个问题',
    name: userStore.userInfo.nickname,
    avatar: userStore.userInfo.avatar,
    time: '10:01'
  }
])

watch(() => props.modelValue, (val) => {
  visible.value = val
})

watch(visible, (val) => {
  emit('update:modelValue', val)
  if (val) {
    nextTick(() => {
      scrollToBottom()
    })
  } else {
    inputMessage.value = ''
  }
})

const handleClose = () => {
  visible.value = false
}

const handleSend = () => {
  if (!inputMessage.value.trim()) return
  
  messages.value.push({
    id: Date.now(),
    type: 'sent',
    contentType: 'text',
    content: inputMessage.value,
    name: userStore.userInfo.nickname,
    avatar: userStore.userInfo.avatar,
    time: new Date().toLocaleTimeString('zh-CN', { hour12: false })
  })
  
  inputMessage.value = ''
  
  // 模拟回复
  setTimeout(() => {
    messages.value.push({
      id: Date.now(),
      type: 'received',
      contentType: 'text',
      content: '好的，我明白了',
      name: props.contact?.name,
      avatar: props.contact?.avatar,
      time: new Date().toLocaleTimeString('zh-CN', { hour12: false })
    })
    scrollToBottom()
  }, 1000)
  
  nextTick(() => {
    scrollToBottom()
  })
}

const scrollToBottom = () => {
  const messagesEl = messagesRef.value
  if (messagesEl) {
    messagesEl.scrollTop = messagesEl.scrollHeight
  }
}

// 表情相关
const showEmoji = ref(false)
const currentEmojiTab = ref(0)
const emojiGroups = [
  {
    icon: '😊',
    emojis: [
      '😀', '😃', '😄', '😁', '😆', '😅', '😂', '🤣',
      '😊', '😇', '🙂', '🙃', '😉', '😌', '😍', '🥰',
      '😘', '😗', '😙', '😚', '😋', '😛', '😝', '😜',
      '🤪', '🤨', '🧐', '🤓', '😎', '🤩', '🥳', '😏'
    ]
  },
  {
    icon: '👋',
    emojis: [
      '👋', '🤚', '🖐', '✋', '🖖', '👌', '🤌', '🤏',
      '✌️', '🤞', '🫰', '🤟', '🤘', '🤙', '👈', '👉',
      '👆', '🖕', '👇', '☝️', '🫵', '👍', '👎', '✊',
      '👊', '🤛', '🤜', '👏', '🙌', '👐', '🤲', '🤝'
    ]
  },
  {
    icon: '❤️',
    emojis: [
      '❤️', '🧡', '💛', '💚', '💙', '💜', '🖤', '🤍',
      '🤎', '💔', '❤️‍🔥', '❤️‍🩹', '❣️', '💕', '💞', '💓',
      '💗', '💖', '💘', '💝', '💟', '☮️', '✝️', '☪️',
      '🕉️', '☸️', '✡️', '🔯', '🕎', '☯️', '☦️', '🛕'
    ]
  }
]

const toggleEmoji = () => {
  showEmoji.value = !showEmoji.value
}

const insertEmoji = (emoji) => {
  if (!inputMessage.value) {
    inputMessage.value = ''
  }
  inputMessage.value += emoji
  closeEmojiPicker()
}

// 图片上传
const handleImageUpload = (file) => {
  const reader = new FileReader()
  reader.onload = (e) => {
    sendMessage({
      contentType: 'image',
      content: e.target.result
    })
  }
  reader.readAsDataURL(file.raw)
}

// 文件上传
const handleFileUpload = (file) => {
  sendMessage({
    contentType: 'file',
    content: URL.createObjectURL(file.raw),
    fileName: file.raw.name,
    fileSize: formatFileSize(file.raw.size)
  })
}

// 录音相关
const isRecording = ref(false)
const recordingTime = ref(0)
let recordTimer = null
let mediaRecorder = null
let audioChunks = []

const startRecording = async () => {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
    mediaRecorder = new MediaRecorder(stream)
    audioChunks = []
    
    mediaRecorder.ondataavailable = (e) => {
      audioChunks.push(e.data)
    }
    
    mediaRecorder.onstop = () => {
      if (audioChunks.length > 0) {
        const audioBlob = new Blob(audioChunks, { type: 'audio/wav' })
        const audioUrl = URL.createObjectURL(audioBlob)
        sendMessage({
          contentType: 'voice',
          content: audioUrl,
          duration: recordingTime.value
        })
      }
    }
    
    mediaRecorder.start()
    isRecording.value = true
    startRecordingTimer()
  } catch (error) {
    ElMessage.error('无法访问麦克风')
  }
}

const stopRecording = () => {
  if (!isRecording.value || !mediaRecorder) return
  
  try {
    mediaRecorder.stop()
    stopRecordingTimer()
    isRecording.value = false
    recordingTime.value = 0
    
    // 停止所有音轨
    mediaRecorder.stream.getTracks().forEach(track => track.stop())
  } catch (error) {
    console.error('停止录音失败:', error)
  }
}

const cancelRecording = () => {
  if (!isRecording.value) return
  
  mediaRecorder?.stop()
  stopRecordingTimer()
  isRecording.value = false
  recordingTime.value = 0
  ElMessage.info('已取消录音')
}

const startRecordingTimer = () => {
  recordTimer = setInterval(() => {
    recordingTime.value++
    if (recordingTime.value >= 60) {
      stopRecording()
    }
  }, 1000)
}

const stopRecordingTimer = () => {
  clearInterval(recordTimer)
}

// 播放语音
const playVoice = (msg) => {
  const audio = new Audio(msg.content)
  audio.play()
}

// 工具函数
const formatFileSize = (bytes) => {
  if (bytes < 1024) return bytes + 'B'
  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + 'KB'
  return (bytes / 1024 / 1024).toFixed(1) + 'MB'
}

// 发送消息
const sendMessage = (msgData) => {
  messages.value.push({
    id: Date.now(),
    type: 'sent',
    name: userStore.userInfo.nickname,
    avatar: userStore.userInfo.avatar,
    time: new Date().toLocaleTimeString('zh-CN', { hour12: false }),
    ...msgData
  })
  
  nextTick(() => {
    scrollToBottom()
  })
}

// 是否可以发送消息
const canSend = computed(() => {
  return inputMessage.value.trim() || isRecording.value
})

// 添加消息格式化方法
const formatMessage = (content) => {
  if (!content) return ''
  // 转义HTML特殊字符，防止XSS攻击
  const escapeHtml = (text) => {
    return text
      .replace(/&/g, "&amp;")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;")
      .replace(/"/g, "&quot;")
      .replace(/'/g, "&#039;")
  }
  
  // 处理表情显示
  return escapeHtml(content)
}

// 添加联系人列表数据
const contacts = ref([
  {
    id: 1,
    name: '张三',
    role: '系统管理员',
    avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
    unreadCount: 3,
    lastMessage: '好的，我知道了',
    lastMessageTime: '10:30'
  },
  {
    id: 2,
    name: '李四',
    role: '技术支持',
    avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
    unreadCount: 12,
    lastMessage: '请问这个问题解决了吗？',
    lastMessageTime: '昨天'
  },
  {
    id: 3,
    name: '王五',
    role: '产品经理',
    avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
    unreadCount: 0,
    lastMessage: '收到，谢谢',
    lastMessageTime: '星期一'
  }
])

const searchText = ref('')
const currentContact = ref(props.contact || null)

// 监听 props.contact ��变化
watch(() => props.contact, (newContact) => {
  if (newContact) {
    currentContact.value = newContact
  }
})

// 搜索过滤
const filteredContacts = computed(() => {
  if (!searchText.value) return contacts.value
  return contacts.value.filter(contact => 
    contact.name.includes(searchText.value) || 
    contact.role.includes(searchText.value)
  )
})

// 选择联系人
const selectContact = (contact) => {
  currentContact.value = contact
  // 清除未读消息数
  contact.unreadCount = 0
}

// 当前联系人的消息
const currentMessages = computed(() => {
  // 这里可以根据 currentContact 筛选消息
  return messages.value
})

// 根据模式设置对话框宽度
const dialogWidth = computed(() => {
  return props.mode === 'full' ? '1000px' : '600px'
})

// 根据模式设置标题
const dialogTitle = computed(() => {
  return props.mode === 'full' ? '聊天' : props.contact?.name || '聊天'
})

// 根据模式决定是否显示联系人列表
const showContactsList = computed(() => {
  return props.mode === 'full'
})

// 添加关闭表情选择器的方法
const closeEmojiPicker = () => {
  showEmoji.value = false
}

// 添加点击外部关闭表情选择器
onMounted(() => {
  document.addEventListener('click', (e) => {
    const emojiPicker = document.querySelector('.emoji-picker')
    const emojiTrigger = document.querySelector('.emoji-trigger')
    if (emojiPicker && emojiTrigger) {
      if (!emojiPicker.contains(e.target) && !emojiTrigger.contains(e.target)) {
        showEmoji.value = false
      }
    }
  })
})

// 在组件卸载时清理事件监听
onUnmounted(() => {
  document.removeEventListener('click', closeEmojiPicker)
  // 清理其他可能的定时器和事件监听
  if (recordTimer) {
    clearInterval(recordTimer)
  }
  if (mediaRecorder) {
    mediaRecorder.stop()
  }
})

// 创建图标组件映射
const IconMap = {
  Document,
  Microphone,
  Picture,
  Folder,
  ChatRound,
  ChatDotRound,
  Location,
  Search,
  Close,
  Edit,
  Delete,
  Switch,
  User
}

// 添加图标解析函数
const resolveIcon = (iconName) => {
  return IconMap[iconName] || null
}

// 修改模板中的动态组件使用
// 将 <component :is="item.icon" /> 改为 <component :is="resolveIcon(item.icon)" />
</script>

<style scoped>
.chat-dialog :deep(.el-dialog__body) {
  padding: 0;
}

.chat-container {
  display: flex;
  height: v-bind('mode === "full" ? "600px" : "500px"');
}

.contacts-sidebar {
  width: 280px;
  border-right: 1px solid #f0f0f0;
  display: flex;
  flex-direction: column;
}

.search-box {
  padding: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.contacts-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.contact-item {
  display: flex;
  align-items: center;
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
  margin-bottom: 4px;
}

.contact-item:hover {
  background: #f5f7fa;
}

.contact-item.active {
  background: #e6f7ff;
}

.contact-info {
  margin-left: 12px;
  flex: 1;
}

.contact-name {
  font-size: 14px;
  color: #333;
  margin-bottom: 4px;
}

.contact-status {
  font-size: 12px;
  color: #999;
}

.chat-main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.chat-header {
  padding: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.chat-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.chat-subtitle {
  font-size: 12px;
  color: #999;
  margin-left: 8px;
}

.no-chat {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 美化滚动条 */
.contacts-list::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.contacts-list::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: #e0e0e0;
}

.contacts-list::-webkit-scrollbar-track {
  border-radius: 3px;
  background: #f5f5f5;
}

/* 调整对话框样式 */
:deep(.el-dialog) {
  border-radius: 8px;
  overflow: hidden;
}

:deep(.el-dialog__header) {
  margin: 0;
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
}

:deep(.el-dialog__body) {
  padding: 0;
}

:deep(.el-dialog__title) {
  font-size: 16px;
  font-weight: 500;
}

.chat-messages {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  background: #f5f7fa;
}

.message {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}

.message.sent {
  flex-direction: row-reverse;
}

.message-content {
  max-width: 70%;
}

.message.sent .message-content {
  text-align: right;
}

.message-info {
  margin-bottom: 4px;
}

.message-info .name {
  font-size: 12px;
  color: #999;
}

.message-info .time {
  font-size: 12px;
  color: #999;
  margin-left: 8px;
}

.message-text {
  padding: 10px 16px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  word-break: break-all;
  line-height: 1.5;
}

.message-text span {
  white-space: pre-wrap;  /* 保留空格和换行 */
}

.message.sent .message-text {
  background: #e6f7ff;
  color: #1890ff;
}

.chat-input {
  padding: 20px;
  border-top: 1px solid #f0f0f0;
}

.input-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

/* 美化滚动条 */
.chat-messages::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.chat-messages::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: #e0e0e0;
}

.chat-messages::-webkit-scrollbar-track {
  border-radius: 3px;
  background: #f5f5f5;
}

.message-text.image {
  padding: 4px;
  background: transparent;
  box-shadow: none;
}

.message-image {
  max-width: 200px;
  max-height: 200px;
  border-radius: 4px;
  cursor: pointer;
}

.file-message {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
}

.file-info {
  flex: 1;
}

.file-name {
  font-size: 14px;
  margin-bottom: 4px;
}

.file-size {
  font-size: 12px;
  color: #999;
}

.voice-message {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  cursor: pointer;
}

.voice-waves {
  display: flex;
  align-items: center;
  gap: 2px;
}

.voice-waves span {
  width: 2px;
  height: 10px;
  background: currentColor;
  animation: wave 1s infinite;
}

.voice-waves span:nth-child(2) { animation-delay: 0.2s; }
.voice-waves span:nth-child(3) { animation-delay: 0.4s; }
.voice-waves span:nth-child(4) { animation-delay: 0.6s; }

@keyframes wave {
  0%, 100% { height: 6px; }
  50% { height: 12px; }
}

.input-toolbar {
  padding: 8px;
  border-bottom: 1px solid #f0f0f0;
}

.toolbar-left {
  display: flex;
  gap: 8px;
}

.emoji-trigger {
  position: relative;
}

.emoji-picker {
  position: absolute;
  bottom: 40px;
  left: 0;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: 360px;
  display: flex;
  flex-direction: column;
}

.emoji-tabs {
  display: flex;
  border-bottom: 1px solid #f0f0f0;
  padding: 8px;
}

.emoji-tab {
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.3s;
}

.emoji-tab:hover {
  background: #f5f7fa;
}

.emoji-tab.active {
  background: #e6f7ff;
}

.emoji-content {
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 8px;
  height: 200px;
  overflow-y: auto;
}

.emoji-item {
  font-size: 24px;
  padding: 8px;
  cursor: pointer;
  text-align: center;
  border-radius: 4px;
  transition: all 0.3s;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.emoji-item:hover {
  background: #f5f7fa;
  transform: scale(1.2);
}

/* 美化滚动条 */
.emoji-content::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.emoji-content::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: #e0e0e0;
}

.emoji-content::-webkit-scrollbar-track {
  border-radius: 3px;
  background: #f5f5f5;
}

.recording-tip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 16px 24px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.recording-icon {
  font-size: 24px;
  color: #f56c6c;
  animation: pulse 1s infinite;
}

.recording-time {
  margin-left: 8px;
  color: #fff;
}

.cancel-tip {
  font-size: 12px;
  color: #999;
  margin-left: 16px;
}

@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

.emoji-picker {
  animation: fadeInUp 0.2s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 美化滚动条 */
.emoji-picker::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.emoji-picker::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: #e0e0e0;
}

.emoji-picker::-webkit-scrollbar-track {
  border-radius: 3px;
  background: #f5f5f5;
}

.avatar-wrapper {
  position: relative;
}

.unread-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: #ff4d4f;
  border-radius: 8px;
  color: #fff;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(255, 77, 79, 0.2);
}

.contact-info-content {
  flex: 1;
  min-width: 0;
  margin-left: 12px;
}

.contact-name {
  font-size: 14px;
  color: #333;
  margin-bottom: 4px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contact-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #999;
}

.last-message {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 8px;
}

.message-time {
  flex-shrink: 0;
}

/* 添加动画效果 */
.unread-badge {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

/* 优化联系人列表样式 */
.contact-item {
  padding: 12px;
  border-radius: 8px;
  transition: all 0.3s;
  cursor: pointer;
}

.contact-item:hover {
  background: #f5f7fa;
}

.contact-item.active {
  background: #e6f7ff;
}

.contact-info {
  display: flex;
  align-items: center;
}
</style> 